<!DOCTYPE html>
<html>
    <head>
        <script src="./js/myplotter.js"></script>
        <script src="./js/myperceptron.js"></script>
        <script src="./js/myailib.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" 
            width="400px;" height="400px;" 
            style="width:100%;max-width: 400px;border:1px soli black;"></canvas>
            <div id="demo"></div>
            <button onclick="train(100)">100 times</button>
            <button onclick="train(200)">200 times</button>
            <button onclick="train(300)">300 times</button>
            <button onclick="train(500)">500 times</button>
        <script>

            let xArray = [32,53,61,47,59,55,52,39,48,52,45,54,44,58,56,48,44,60]
            let yArray = [31,68,62,71,87,78,79,59,75,71,55,82,62,75,81,60,82,97]
            let myTrainer = new Trainer(xArray,yArray);

            let myPlotter = new XYPlotter("myCanvas");
            myPlotter.transformXY();
            myPlotter.transformMax(100,100);
            myPlotter.plotPoints(xArray.length,xArray,yArray,"blue");

            function train(iter){
                myTrainer.train(iter)
                //display guessed results
                document.getElementById("demo").innerHTML = `
                <p>Slope: ${myTrainer.weight.toFixed(2)}</p>
                <p>Bias: ${myTrainer.bias.toFixed(2)}</p>
                <p>Cost: ${myTrainer.cost.toFixed(2)}</p>                    
                `
                myPlotter.plotLine(0,myTrainer.bias, myPlotter.xMax, myPlotter.xMax*(myTrainer.weight)+(myTrainer.bias),"black");
            }
        </script>
    </body>
</html>